<template>
    <div class="w750">
        <div class="submit-order" :class="themes.theme">
            <div class="submit-list">
                <van-checkbox-group v-model="result" ref="checkboxGroup">
                    <div class="submit-con" style="margin-bottom: 10px; border-radius: 0" v-for="(item, index) in goodsList" :key="index">
                        <div class="pro-mes" style="border-top: 0">
                            <van-checkbox :name="item.orderItemId" :checked-color="themes.color" @change="change" :disabled="!item.isSelect" />
                            <div class="pro-img" style="margin-left: 10px">
                                <legend-image
                                    :pic="item.prodPic"
                                    :type="'wh'"
                                    :options="{ w: '80', h: '80' }"
                                    :class="'needsclick'"
                                    :isJD="item.prodSource == 'JD'"
                                />
                                <img src="@/assets/images/haitao-small.png" class="haitao" v-if="item.goodsType == 'overseas'" />
                            </div>
                            <div class="pro-name">
                                <a href="#" class="name">{{ item.prodName }}</a>
                                <div class="sku">
                                    <span style="margin-right: 10px" v-if="item.attribute">{{ item.attribute }}</span>
                                    <span class="goods-num">数量：{{ item.basketCount }}</span>
                                </div>
                                <div class="goods-btn clearfix">
                                    <span class="price">
                                        ￥
                                        <em class="now">{{ Money(item.prodPrice)[0] }}</em>
                                        .{{ Money(item.prodPrice)[1] }}
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </van-checkbox-group>
                <div class="footer">
                    <van-checkbox v-model="checked" @click="checkAll" style="margin-left: 17px" :checked-color="themes.color">全选</van-checkbox>
                    <van-button :color="themes.color" @click="goApplyReturn" style="width: 110px" :disabled="disabled">下一步</van-button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import legendImage from 'components/legendImage/legendImage'
import { afterSale } from 'api/afterSale'
import cash from 'utils/tool'
import { mapState } from 'vuex'
export default {
    components: { legendImage },
    watch: {
        result(val) {
            if (val.length > 0) {
                this.disabled = false
            } else {
                this.disabled = true
            }
            if (val.length == this.goodsList.length) {
                this.checked = true
            } else {
                this.checked = false
            }
        }
    },
    data() {
        return {
            checked: false,
            result: [],
            Money: cash, //价格转换
            orderId: '', //订单ID
            goodsList: [], //商品信息
            type: 0, //售后服务类型
            disabled: true
        }
    },
    mounted() {
        this.orderId = this.$route.query.orderId
        this.type = this.$route.query.serviceType
        afterSale.getSelectGoods({ orderId: this.orderId, serviceType: this.type }).then((res) => {
            if (res.status == 1) {
                this.goodsList = res.result
            }
        })
    },
    methods: {
        change() {},
        //去售后详情页
        goApplyReturn() {
            let ids = this.result.join()
            this.$router.push({
                path: '/applyReturn',
                query: {
                    orderId: this.orderId,
                    orderItemId: ids,
                    serviceType: this.type
                }
            })
        },
        checkAll() {
            this.$refs.checkboxGroup.toggleAll()
        },
        goback() {
            this.$router.back()
            this.$router.isBack = true
        }
    },
    computed: {
        ...mapState(['themes'])
    }
}
</script>

<style src="../../../assets/css/return.css" scoped></style>
<style src="../../../assets/css/popup.css" scoped></style>
<style src="../../../assets/css/submit-order.css" scoped></style>
<style src="../../../assets/css/style/submit-order-style.css" scoped></style>
<style>
.footer {
    position: fixed;
    z-index: 100;
    bottom: 0;
    background: #fff;
    width: 100%;
    height: 40px;
    display: flex;
    justify-content: space-between;
}
</style>
